<template>
	<view class="itemBox" :class="'bg_Color'+info.typeBgColor">
		<view class="imgInfo">
			<image :src="info.img"></image>
			<view class="info">

				<view>
					<view class="infoItem">告警原因：<span>{{info.title}}</span></view>
					<view class="infoItem">告警地点：<span>{{info.address}}</span></view>
					<view class="infoItem">告警时间：<span>{{info.time}}</span></view>
				</view>
				<view class="hand">
					<view class="status" :class="info.status=== '0'? 'zero':'one'">{{info.status=== '0'?'未处理':'已处理'}}
					</view>
					<view class="btn" @click="toPage(info)">{{info.status=== '0'?'立即处理':'查看详情'}}</view>
				</view>


			</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: 'name',
		props: {
			info: {
				type: Object,
				default () {
					return {

					}
				}
			}
		},
		methods:{
			toPage(e){
				 this.$emit('toPage',e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.itemBox {
		display: flex;
		height: 236px;
		border-radius: 5px;
		justify-content: space-between;


		border-radius: 5px;
		font-size: 12px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		margin-bottom: 10px;
		position: relative;

		&.bg_Color0::after {
			content: "";
			opacity: 0.1;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
			border-radius: 5px;
			background: linear-gradient(90deg, #FF5B5B 0%, rgba(255, 91, 91, 0) 100%);

		}

		&.bg_Color99::after {
			border-radius: 5px;
			content: "";
			opacity: 1;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
			background: #fff;
		}

		.hand {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: relative;
			font-size: 12px;
			width: 76px;

			.status {
				width: 52px;
				height: 22px;
				border-top-left-radius: 4px;
				border-top-right-radius: 10px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 4px;
				position: absolute;
				top: 7.5px;
				right: 0px;
				text-align: center;
				line-height: 22px;
				color: #fff;
			}

			.zero {
				background-color: #FF5B5B;
			}

			.one {
				background-color: #3FD098;
			}

			.btn {
				color: #0065D8;
				border: 1px solid #0065D8;
				border-radius: 20px;
				padding: 3px 11px;

				position: absolute;
				bottom: 1px;
				right: 0px;
			}
		}

		.imgInfo {

			display: flex;
			flex-direction: column;
			width: 100%;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			font-size: 14px;

			.info {
				margin: 7.5px 15px;
				color: #666666;
				display: flex;

				justify-content: space-between;

				.infoItem {
					color: #666;
					margin: 5.5px 0;

					span {
						color: #181818;
					}
				}

			}

			image {
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				width: 100%;
				height: 142px;
			}
		}

	}
</style>